<script setup lang="ts">
import {User} from '@element-plus/icons-vue'

import {onMounted, ref} from "vue";
import {reqPatient, reqSchedule} from "@/api/hospital";
import {Doctor, PatientArr, PatientResponseData, ScheduleResponseData} from "@/api/hospital/type.ts";
import {useRoute, useRouter} from "vue-router";
import {reqSubmitOrder} from "@/api/user";
import  type {SubmitOrderResponseData} from "@/api/user/type.ts";
import {ElMessage} from "element-plus";

let patientArr = ref<PatientArr>();
let schedule = ref<Doctor>();
let currentIndex = ref<number>(-1);
let $router = useRouter();
let $useRoute = useRoute();
onMounted(()=>{
  fetchPatietnt();
  fetchSchedule();
})
const fetchPatietnt= async ()=>{
  let result:PatientResponseData = await reqPatient();
  if(result.code==200){
    patientArr.value=result.data;
  }
}
const fetchSchedule= async ()=>{
  let scheduleId = $useRoute.query.docId;
  let result:ScheduleResponseData = await reqSchedule(scheduleId as string);
  console.log(result)
  if(result.code==200){
    schedule.value=result.data;
  }
}

const changeIndex = (index:number)=>{
  currentIndex.value=index;
}
const goUser = async ()=>{
  let patientId = patientArr.value?. [ currentIndex.value].id;
  let scheduleId = schedule.value?.id;
  let hoscode = schedule.value?.hoscode;
  console.log(hoscode);
 // let result:OrderResponseData =  await reqSubmitOrder(hoscode,scheduleId,patientId);
 let result:SubmitOrderResponseData =  await reqSubmitOrder(scheduleId as string,patientId as string);//本地接口
  if(result.code==200){
    $router.push({path:`/user/order?orderId=${result.data}`})
  }else{
    ElMessage({
      type:'error',
      message:result.message,
    })
  }
}
const addPatient = ()=>{
  $router.push({path:'/user/patient',query:{type:'add'}});
}
</script>

<template>
  <div class="container">
  <h1 class="tip">确认挂号信息</h1>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button size="default" type="primary" :icon="User" @click="addPatient">添加就诊人</el-button>
        </div>
      </template>
      <div class="user">
        <Visiter @click="changeIndex(index)" v-for="(patient,index) in patientArr" :key="patient.id" class="item" :patient="patient" :index="index" :currentIndex="currentIndex"/>
      </div>
    </el-card>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <el-descriptions
          class="margin-top"
          :column="2"
          border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              就诊日期：
            </div>
          </template>
          {{schedule?.workDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              就诊医院：
            </div>
          </template>
          {{schedule?.param?.hosname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              就诊科室：
            </div>
          </template>
          {{schedule?.param?.depname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医生姓名：
            </div>
          </template>
          {{schedule?.docname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医生职称：
            </div>
          </template>
          {{schedule?.title}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医生专长：
            </div>
          </template>
          {{schedule?.skill}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医生服务费：
            </div>
          </template>
          <span style="color: red">{{schedule?.amount}}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="btn">
      <el-button type="primary" size="default" :disabled="currentIndex===-1" @click="goUser()">确认挂号</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .container{
    .tip{
      font-weight: 900;
      color: #7f7f7f;
      font-size: 20px;
    }
    .box-card{
      margin: 20px 0px;
      .card-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .user{
          display: flex;
        flex-wrap: wrap;
        .item{
          width: 32%;
          margin: 5px;
          border: solid 1px #ccc;
        }
      }
    }
    .btn{
      display: flex;
      justify-content: center;
      margin: 10px 0px;
    }
  }
</style>
